<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/8/16
  Time: 14:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>忘记密码</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"/>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/forget-password.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">

</head>
<body>
<%@ include file="../pub/header.jsp" %>
<div class="send-email" id="send-email" style="display: block">
    <form>
        <h3>输入你要修改密码的邮箱</h3>
        <div class="mb-3">
            <label for="email" class="form-label">邮箱</label>
            <input type="text" class="form-control"
                   id="email"
                   aria-describedby="emailHelp"
                   placeholder="输入邮箱"
                   onfocus="showTips('inp_email','提示：输入格式正确的邮箱，如：xxxx@xx.com')"
                   onblur="checkEmail()"
                   onkeyup="checkEmail()"
            />
            <div class="span-text"><span id="inp_email"></span></div>
        </div>
        <a type="button" class="btn btn-success"
           id="next" href="javascript:next()">下一步 >></a>
    </form>
</div>

<div class="forget" id="forget" style="display: none">
    <form>
        <h3>忘记密码</h3>
        <div class="mb-3">
            <label for="checkCode" class="form-label">验证码<span
                    class="check-code">（验证码已发到您邮箱，请先前往邮箱查看）</span></label>
            <input type="text" class="form-control"
                   id="checkCode"
                   aria-describedby="emailHelp"
                   placeholder="填入验证码"/>
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">新密码</label>
            <input type="password" class="form-control" id="password" placeholder="密码必须包含大小写字母，数字,6位以上" required/>
        </div>
        <div class="mb-3">
            <label for="re-password" class="form-label">重复新密码</label>
            <input type="password" class="form-control" id="re-password"
                   name="rePassword"
                   placeholder="重复填入新密码"
                   onfocus="showTips('inp_password','填入重复密码')"
                   onblur="check()"
                   onkeyup="check()" required/>
            <div class="form-text"><span id="inp_password"></span></div>
        </div>
        <a type="button" class="btn btn-success"
           id="previous" href="javascript:back()"><< 上一步</a>
        <a href="javascript:updatePassword()" type="submit" class="btn btn-primary">确认修改</a>
    </form>
</div>

<%@ include file="../pub/footer.jsp" %>
</body>

<script src="${pageContext.request.contextPath}/js/md5.js"></script>
<script language="JavaScript">

    function next() {
        let div1 = document.getElementById("send-email");
        let div2 = document.getElementById("forget");
        let email = $('#email').val();
        if (email != null && email != '') {
            $.ajax({
                type: 'post',
                url: '${pageContext.request.contextPath}/user/sendEmail',
                data: {
                    'email': email
                },
                success: function (result) {
                    if (result.code == 1) {
                        div1.setAttribute("style", "display:none");
                        div2.setAttribute("style", "display:block");
                    }else{
                        let span = document.getElementById("inp_email");
                        span.setAttribute('style', 'color:red; font-size:16px;');
                        span.innerText = result.msg;
                        return false;
                    }
                }
            });
        }
    }

    function back() {
        let div1 = document.getElementById("send-email");
        let div2 = document.getElementById("forget");
        div1.setAttribute("style", "display:block");
        div2.setAttribute("style", "display:none");
    }

    function showTips(spanID, msg) {
        var span = document.getElementById(spanID);
        span.innerHTML = msg;
    }

    function check() {
        var password = document.getElementById("password").value;
        var rePassword = document.getElementById("re-password").value;
        var span = document.getElementById("inp_password");
        if (rePassword == password && password != '' && rePassword != '') {
            span.innerText = "两次密码匹配 ✔";
            span.setAttribute('style', 'color:green')
            return true;
        } else if (password != '' && rePassword != '') {
            span.innerText = "两次密码不匹配，请检查";
            span.setAttribute('style', 'color:red');
            return false;
        }
    }

    function checkEmail() {
        var reg = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
        var email = document.getElementById("email").value;
        var span = document.getElementById("inp_email");
        if (reg.test(email)) {
            span.setAttribute('style', 'color:green');
            span.innerText = "邮箱可用 ✔";
            return true;
        } else if (email != '') {
            span.setAttribute('style', 'color:red');
            span.innerText = "对不起，邮箱格式貌似有问题";
            return false;
        }
    }

    function updatePassword() {

        let pass = $("#password").val();
        let reg5 = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,20}$/;
        var flag = reg5.test(pass);
        if (!flag){
            alert("密码必须包含大小写字母，数字,6位以上")
            return
        }
        pass=md5(pass)
        $.ajax({
            type: 'post',
            url: '${pageContext.request.contextPath}/user/editPassword',
            data: {
                'checkCode': $('#checkCode').val(),
                'password': pass
            },
            success:function (result) {
                if (result.code==1){
                    window.location.href="${pageContext.request.contextPath}/index";
                }else {
                    let span = document.getElementById("inp_password");
                    span.setAttribute('style', 'color:red; font-size:15px;');
                    span.innerText = result.msg;
                    return false;
                }
            }
        })
    }
</script>
</html>
